import { Button, Card, Form, Input, Select, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import { SearchOutlined, } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table';
import { reqChangeStatus, reqGetCityOrDistrictList, ReqGethospitalList } from '@/api/hospital/hospitalList';
import { HospitalItemType, HospitalListType, ProvinceList, status } from '@/api/hospital/model/hospitalListType';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';
const { Option } = Select;
function HoseitalSet() {
  let navigate = useNavigate()
  // 当前页面显示数量
  let [page, setPage] = useState(5)
  // 当前页码
  let [current, setCurrent] = useState(1)
  // 总数
  let [total, setTotal] = useState<number>()
  // 获取列表然后通过列表渲染
  let [list, setList] = useState<HospitalListType>()
  let [loading, setLoading] = useState(false)
  // 创建表单
  let [form] = useForm()
  // 省份
  let [ProvinceList, setProvinceList] = useState<ProvinceList>([])
  // 市级
  let [cityList, setCityList] = useState<ProvinceList>([])
  // 区级
  let [areaList, setAreaList] = useState<ProvinceList>([])
  // 医院等级
  let [hostypeList, setHostypeList] = useState<ProvinceList>([])
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      width: 100,
      align: 'center',
      // rabder 参数根据书写dataIndex的与否会发生改变,当没有书写时第一个参数和第二个参数一致,都为整行的属性,第三个参数为index
      // 当书写了dataIndex时,第一个参数就变成了当前行对应的当前属性的值
      render: (x: any, y: any, index: number) => {
        return index + 1
      }
    },
    {
      title: "医院logo",
      align: 'center',
      dataIndex: "logoData",
      render: (data) => {
        return <img alt='' width={100} src={`data:image/jpeg;base64,${data}`}></img>
      }
    },
    {
      title: "医院名称",
      align: 'center',
      dataIndex: "hosname",
      // render: (x:any, y:any, z:number) => {
      //   console.log(x, y, z);

      // }
    },
    {
      title: "等级",
      align: 'center',
      dataIndex: "param",
      // 当第一级属性为对象或数组需要使用其内部属性时可以使用render返回处理后的属性值,也可以直接返回节点渲染到页面上
      render: (data) => {
        return data.hostypeString
      }
    },
    {
      title: "详细地址",
      align: 'center',
      render: (data) => {
        return data.param.fullAddress
      }
    },
    {
      title: "状态",
      align: 'center',
      dataIndex: 'status',
      render: (data) => {
        return status[data]
      }
    },
    {
      title: "创建时间",
      align: 'center',
      dataIndex: "createTime",
    },
    {
      title: "操作",
      align: 'center',
      width: "300px",
      render: (data: HospitalItemType) => {
        return <div>
          <Button type='primary' onClick={() => {
            navigate(`/syt/hospital/hospitalList/hospitalShow/${data.id}`)
          }}>查看</Button>
          <Button className='ml-20' type='primary'>排班</Button>
          <Button className='ml-20' type='primary' danger={data.status === 1} onClick={ChansgeStatu(data.id, data.status)}>{data.status === 0 ? "上线" : '下线'}</Button>
        </div>
      },
      fixed: 'right'
    },
  ]
  // 根据条件获取并渲染页面
  let reqGethospitalList = async () => {
    setLoading(true)
    // 获取表单数据并重新获取
    let FormData = form.getFieldsValue()
    let result = await ReqGethospitalList({ page: current, limit: page, ...FormData })
    // 设置总数
    setTotal(result.totalElements)
    // 渲染当前显示页面
    setList(result.content)
    setLoading(false)
  }
  // 选择县时设置市
  let priovinChange = async function (id: number) {
    // 清除区和市级
    form.setFieldsValue({ cityCode: undefined, districtCode: undefined })
    let result = await reqGetCityOrDistrictList(id)
    setCityList(result)
  }
  // 选择市时请求并设置区
  let CityListChange = async function (id: number) {
    form.setFieldsValue({ districtCode: undefined })
    let result = await reqGetCityOrDistrictList(id)
    setAreaList(result)
  }
  // 修改状态
  function ChansgeStatu(id: string, status: number) {
    return async () => {
      setLoading(true)
      status = status ? 0 : 1
      await reqChangeStatus(id, status)
      let newList = list?.map(item => {
        if (item.id === id) {
          item.status = item.status ? 0 : 1
        }
        return item
      })
      setList(newList)
      setLoading(false)
    }
  }
  useEffect(() => {
    // 监听数据变动然后重新调用渲染页面
    reqGethospitalList()
  }, [page, current])
  useEffect(() => {
    // 初始化省份
    ; (async () => {
      let result = await reqGetCityOrDistrictList(86)
      setProvinceList(result)
    })()
      // 初始化医院等级
      ; (async () => {
        let result = await reqGetCityOrDistrictList(10000)
        setHostypeList(result)
      })()
  }, [])
  return <Card>
    <Form
      form={form}
      layout='inline'
      onFinish={reqGethospitalList}
      onReset={reqGethospitalList}
    >

      <Form.Item name='provinceCode' style={{ width: 160 }}>
        <Select placeholder='请选择省' onChange={priovinChange}>
          {
            ProvinceList.map(item => {
              // 使用select中的Option
              return <Option key={item.id} value={item.id}>{item.name}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item name='cityCode' style={{ width: 160 }} >
        <Select placeholder='请选择市' onChange={CityListChange}>
          {
            cityList.map(item => {
              // 使用select中的Option
              return <Option key={item.id} value={item.id}>{item.name}</Option>
            })
          }
        </Select>

      </Form.Item>
      <Form.Item style={{ width: 160 }} name='districtCode'>
        <Select placeholder='请选择区'>
          {
            areaList.map(item => {
              // 使用select中的Option
              return <Option key={item.id} value={item.id}>{item.name}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item style={{ width: 160 }} name='hostype'>
        <Select placeholder='医院类型'>
          {
            hostypeList.map(item => {
              // 使用select中的Option
              return <Option key={item.id} value={item.id}>{item.name}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item style={{ width: 160 }} name='status' >
        <Select placeholder='医院状态'>
          <Option value={status["已上线"]}>已上线</Option>
          <Option value={status["未上线"]}>未上线</Option>
          {/* <Option  ></Option> */}
        </Select>
      </Form.Item>
      <Form.Item name="hosname">
        <Input placeholder="医院名称" />
      </Form.Item>

      <Form.Item name="hoscode">
        <Input placeholder="医院编号" />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
          搜索
        </Button>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="default" htmlType="reset">
          取消
        </Button>
      </Form.Item>
    </Form>
    <Table loading={loading} rowKey={"id"} columns={columns} dataSource={list} bordered className='mt-20'
      // 给表格添加rowSelection属性,就可以给表格添加选项框属性,选项框中含有属性onchange..参数为多选框选择的节点id数组
      //
      // rowSelection={{
      //   type: 'checkbox'
      // }}
      pagination={{
        total: total,
        current: current,//当前页码
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => {
          return <span>当前总数为{total}</span>
        },

        pageSizeOptions: [3, 5, 15],//
        pageSize: page,//当前每页数量 以为每页列表中的一项
        onChange: (current: number, page: number) => {
          setCurrent(current);
          setPage(page)
        },


      }}
    >


    </Table>
  </Card >
}

export default HoseitalSet
